var SluggishnessMaterialBoard = function () {
  var materialTable = function () {
    var template = /* html */ `
      <div class="material-table">
        <table ref="materialTable" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th style="min-width:140px;">物料名称</th>
              <th style="min-width:120px;">供应商</th>
              <th style="min-width:100px;">供方编号</th>
              <th style="min-width:120px;">编号</th>
              <th style="min-width:120px;">规格型号</th>
              <th style="min-width:80px;">单位</th>
              <th style="min-width:100px;">库存数量</th>
              <th style="min-width:100px;">安全库存下限</th>
              <th style="min-width:100px;">安全库存上限</th>
              <th style="min-width:90px;">呆滞时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="material in materialList" :key="material.materialCode" :class="{'odd':material.rowIndex%2!==0}">
              <td>{{material.materialName}}</td>
              <td>{{material.providerName}}</td>
              <td>{{material.providerNo}}</td>
              <td>{{material.color}}</td>
              <td>{{material.model}}</td>
              <td class="is-center no-warp">{{material.unit}}</td>
              <td class="is-center no-warp">{{material.count}}</td>
              <td class="is-center no-warp">{{material.safetyStockMin}}</td>
              <td class="is-center no-warp">{{material.safetyStockMax}}</td>
              <td class="is-center no-warp" :class="'sluggishness-type-'+material.dayType">
                <span>{{material.dayCount}}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    `;

    return {
      mixins: [boardRunningMixin],

      props: {
        materials: {
          type: Array,
          required: true
        }
      },

      watch: {
        changeData: function (newObj, oldObj) {
          if (newObj.rowIndex === oldObj.rowIndex && newObj.rowIndex >= newObj.materials.length) {
            if (newObj.rowIndex !== 0) {
              this.rowIndex = 0;
              this.boardRunning();
              return;
            }
          }
          this.resetMaterialList();
        }
      },

      computed: {
        changeData: function () {
          return {
            rowIndex: this.rowIndex,
            materials: this.materials
          };
        }
      },

      data: function () {
        return {
          materialList: this.materials,
          rowIndex: 0
        };
      },

      mounted: function () {
        this.boardRunning();

        var self = this;
        $(this.$el).resize(function () {
          self.clearTimeoutList();
          if (!self.checkRowMove()) {
            self.rowIndex = 0;
          }
          self.boardRunning();
        });
      },

      methods: {
        boardRunning: function () {
          this.clearTimeoutList();

          this.rowIndexRunning();
        },

        rowIndexRunning: function () {
          var self = this;
          var timeout = setTimeout(function () {
            if (self.checkRowMove()) {
              var rowIndex = self.rowIndex;
              rowIndex++;
              if (rowIndex >= self.materials.length) {
                rowIndex = 0;
              }
              self.rowIndex = rowIndex;
            }
            self.timeoutList[0] = null;
            self.rowIndexRunning();
          }, 5000);
          this.timeoutList[0] = timeout;
        },

        checkRowMove: function () {
          var materialTable = this.$refs['materialTable'];
          if (materialTable === undefined) {
            return false;
          }

          var totalHeight = $(this.$el).height();
          var tableHeight = $(materialTable).height();
          return totalHeight < tableHeight;
        },

        resetMaterialList: function () {
          var materials = this.materials;
          var rowIndex = this.rowIndex;
          if (rowIndex === 0) {
            this.materialList = _.clone(materials);
            return;
          }

          var materialList = materials.slice(rowIndex);
          var materialArray = materials.slice(0, rowIndex);
          materialList.pushArray(materialArray);
          this.materialList = materialList;
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="sluggishness-board" v-loading.fullscreen.lock="loading">
      <div class="sluggishness-board-title">
        仓库呆滞物料
      </div>
      <div class="sluggishness-board-stat" v-if="materialStat!==null">
        <span>一年以上:{{materialStat.yearCount}}</span>
        <span>半年到一年:{{materialStat.halfYearCount}}</span>
        <span>三个月到半年:{{materialStat.monthCount}}</span>
      </div>
      <div class="sluggishness-board-content" v-if="isShow">
        <template v-if="materialList!==null">
          <material-table :materials="materialList"></material-table>
        </template>

        <div v-else class="no-data">
          暂无仓库呆滞物料
        </div>
      </div>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    data: function () {
      return {
        loading: false,
        isShow: false,
        materialList: null,
        materialStat: null
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setMaterialList(true).then(function () {
        self.loading = false;
        self.isShow = true;
        self.boardRunning();
      }).catch(function () {
        self.loading = false;
        self.isShow = true;
      });
    },

    methods: {
      setMaterialList: function (hasAlert) {
        if (hasAlert === undefined) {
          hasAlert = false;
        }

        var self = this;
        return ajaxRequest('displayView/getStillnessMaterial', {}, true, hasAlert).then(function (materialList) {
          materialList = _.orderBy(materialList, ['type'], ['desc']);
          materialList = _.map(materialList, function (material, index) {
            material = new SluggishnessMaterialInfo(material);
            material.rowIndex = index;
            return material;
          });
          self.materialList = materialList;
          self.calMaterialStat();
          return materialList;
        });
      },

      calMaterialStat: function () {
        var materialList = this.materialList;
        var monthCount = 0,
          halfYearCount = 0,
          yearCount = 0;
        for (var i = 0; i < materialList.length; i++) {
          var material = materialList[i];
          var dayType = material.dayType;
          if (dayType === 1) {
            monthCount++;
          } else if (dayType === 2) {
            halfYearCount++;
          } else if (dayType === 3) {
            yearCount++;
          }
        }

        this.materialStat = {
          monthCount: monthCount,
          halfYearCount: halfYearCount,
          yearCount: yearCount
        };
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.resetMaterialList();
      },

      resetMaterialList: function () {
        var self = this;
        var timeout = setTimeout(function () {
          self.setMaterialList().then(function () {
            self.resetMaterialList();
          });
          self.timeoutList[0] = null;
        }, 30 * 60 * 1000);
        this.timeoutList[0] = timeout;
      }
    },

    components: {
      materialTable: materialTable
    },

    template: template
  };
}();
